$avatar-size: 40px;
$msg-bg-color: rgb(255,224,224);

.message-box {
    .message {
        

      

        .message-avatar {
            width: $avatar-size;
            height: $avatar-size;
            flex-shrink: 0;
            padding: 10px 5px;
        }

        .message-item {
            font-size: 12px; 
            color: #666;
            width: 100%;
            padding: 5px;

            .time{
                font-size: 8px;
                color: #ccc;
            }

            .data {
                background: $msg-bg-color; 
                border-radius: 5px;
                padding: 5px;
            }
        }

        &.revese {
            flex-direction: row-reverse;
            .message-item {
                .time {
                    text-align: right;
                }
            }
        }

    }
}